<!--
 * @Description:
 * @Author BPF
 * @create 2021/9/9 23:53
 -->
<template>
  <el-popover
    ref="popper"
    placement="top-start"
    :width="popover.width"
    trigger="click"
    popper-class="vxe-popper"
    @show="onShow"
    @hide="onHide"
  >
    <el-input
      slot="reference"
      ref="input"
      :value="_name"
      readonly
      clearable
      placeholder="请选择"
      :suffix-icon="isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
      style="cursor: pointer"
      class="input"
      @clear="onClear"
    >
    </el-input>
    <div class="px-16px py-10px">
      <el-input v-model="kwds" placeholder="根据学院名过滤" clearable></el-input>
    </div>
    <vxe-list height="270" :data="_options">
      <template #default="{ items }">
        <template v-if="items.length">
          <div
            v-for="(item, index) in items"
            :key="index"
            :class="{
              'vxe-list-item': true,
              'vxe-list-item--active': value == item.code
            }"
            @click="onChooseItem(item)"
          >
            {{ item.name }}
          </div>
        </template>
        <template v-else>
          <g-empty class="flex items-center" style="height: 200px"></g-empty>
        </template>
      </template>
    </vxe-list>
  </el-popover>
</template>

<script>
export default {
  name: 'GVirtualSelect',

  model: {
    prop: 'value',
    event: 'setValue'
  },

  props: {
    options: {
      type: Array,
      options: () => []
    },
    filterPlaceholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },

  data () {
    return {
      kwds: '',
      select: {
        name: ''
      },
      isShow: false,
      popover: {
        width: '' // popover宽度
      }
    }
  },

  computed: {
    _name () {
      return (Array.isArray(this.options) && this.options.find((v) => v.code == this.value)?.name) || ''
    },
    _options () {
      if (Array.isArray(this.options)) {
        return this.options.filter((v) => String(v.name).toLowerCase().includes(String(this.kwds).toLowerCase()))
      }
      return this.options || []
    }
  },

  methods: {
    onChooseItem(item) {
      this.$emit('setValue', item.code)
      this.$nextTick(() => {
        this.$refs.popper && this.$refs.popper.doClose()
      })
    },

    onShow() {
      this.isShow = true
      this.popover.width = this.$refs.input.$el.clientWidth
    },

    onHide() {
      this.isShow = false
    },

    onClear() {
      this.$emit('setValue', '')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .input {
  input {
    cursor: pointer;
  }
}
.vxe-popper {
  padding: 0;
  .vxe-list-item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    &.vxe-list-item--active {
      color: $--color-primary;
      font-weight: 700;
    }
    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
